<template>
  <div style="width: 700px">
    <el-form :model="formData" :rules="rules" ref="formRef" label-width="20%">

      <el-form-item label="头像" prop="avatar">
        <label for="avatar">
          <el-avatar style="cursor: pointer;margin-left: 40px"
                     :size="150"
                     :src="formData.avatar">
            上 传 头 像
          </el-avatar>
        </label>
        <input type="file" id="avatar" hidden @change="handleFileUpload($event)">
      </el-form-item>
      <el-form-item label="昵称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入昵称" clearable/>
      </el-form-item>
      <el-form-item label="账号" prop="account">
        <el-input v-model="formData.account" disabled/>
      </el-form-item>
      <el-form-item label="旧密码">
        <el-input v-model="formData.old_password" show-password placeholder="请输入旧密码"/>
      </el-form-item>
      <el-form-item label="新密码">
        <el-input v-model="formData.password" show-password placeholder="请输入新密码"/>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input v-model="formData.new_password" show-password placeholder="请输入新密码"/>
      </el-form-item>
      <el-form-item label="备注" prop="memo">
        <el-input
            v-model="formData.memo"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 6 }"
            placeholder="请输入备注"
            maxlength="200"
            show-word-limit
        />
      </el-form-item>
    </el-form>

    <div class="flex justify-center">
      <el-button type="primary" @click="handleSave">保 存</el-button>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive, shallowRef} from "vue";
import {setting} from '@/api/user'
import {file} from '@/api/upload'
import feedback from "@/utils/feedback";
import FormInstance from "element-plus";
import useUserStore from "@/stores/modules/user";

const userStore = useUserStore()
const formRef = shallowRef(FormInstance)
const formData = reactive({
  name: '',
  account: '',
  avatar: '',
  old_password: '',
  password: '',
  new_password: '',
  memo: ''
})

const rules = reactive({
  name: [
    {required: true, message: '请输入昵称', trigger: 'blur'},
  ],
})

const handleSave = async () => {
  await formRef.value?.validate()

  if (formData.password !== formData.new_password) {
    return feedback.msgError('密码不一致，请重新输入！')
  }

  if ('' === formData.old_password &&
      '' !== formData.password) {
    return feedback.msgError('请输入旧密码！')
  }

  setting(formData).then(() => {
    feedback.optionSuccess()
    window.location.reload()
  })
}

const handleFileUpload = (event) => {
  const fileInfo = event.target.files[0]
  if (fileInfo.size > 2 * 1024 * 1024) {
    return feedback.msgWarning('图片大小不能超过2M')
  }
  let fileData = new FormData()
  fileData.append('file', fileInfo)
  file(fileData).then((data) => {
    formData.avatar = data
  })
}

onMounted(() => {
  const userInfo = userStore.userInfo
  formData.name = userInfo.name
  formData.account = userInfo.account
  formData.avatar = userInfo.avatar
  formData.memo = userInfo.memo
})
</script>

<style scoped>

</style>